<template>
    <el-form-item label="商品描述">
        <div class="goods-info-edit-warp">
            <div class="goods-info-edit-act flex">
                <DialogForm type="gallery" class="item-bg" @okCallback="addPic" :params="{ isMultiple: true }">
                    <a class="add-item info-pic-add"><i class="iconfont icon-tianjiatupian"></i>添加图片</a>
                </DialogForm>
                <a class="add-item info-text-add" @click="addText"><i class="iconfont icon-wenben" style="font-size: 14px"></i>添加文本</a>
                <span>点击按钮添加图片或者文本，您还可以通过拖拽进行排序</span>
            </div>
            <div class="goods-info-edit-con">
                <draggable
                    class="info-edit-con-list"
                    item-key=""
                    :list="<any>descArr"
                    ghost-class="ghost"
                    chosen-class="chosenClass"
                    animation="300"
                    @start=""
                    @end=""
                >
                    <template #item="{ element, index }">
                        <div class="info-edit-list-item" draggable="false" style="">
                            <div class="edit-list-item-img" v-if="element.type == 'pic'">
                                <a class="lyecs-dialogImage" draggable="false"><img :src="imageFormat(element.pic)" draggable="false" /> </a>
                                <DialogForm type="gallery" class="item-bg" @okCallback="editPic" :params="{ isMultiple: false }" :data="{ index: index }">
                                    <div class="btn-edit">修改</div>
                                </DialogForm>
                            </div>
                            <div class="edit-list-item-text" v-if="element.type == 'text'">
                                <p><i class="iconfont icon-1fuwenben"></i></p>
                                <p>文本</p>
                                <div class="btn-edit" @click="editText(index)">修改</div>
                            </div>
                            <i class="btn-del iconfont icon-cha" @click="del(index)"></i>
                        </div>
                    </template>
                </draggable>
            </div>
            <Modal v-model:open="visible" title="添加文本" @ok="onOk()" :destroyOnClose="true" :width="800">
                <Editor v-model:html="editorHtml.html" height="300px"></Editor>
            </Modal>
        </div>
    </el-form-item>
    <el-form-item label="H5预览">
        <div class="goods-detail-preview-warp" v-html="previewHtml"></div>
    </el-form-item>
</template>
<script setup lang="ts">
// Author by 老杨
import { ref, onMounted, computed } from "vue";
import { DialogForm } from "@/components/dialog";
import { Editor } from "@/components/editor";
import { Modal } from "ant-design-vue";
import draggable from "vuedraggable";
import { imageFormat } from "@/utils/format";
const props = defineProps({
    descArr: { type: [Object, Array], default: [] }
});
const descArr: any = ref(props.descArr || []);

const visible = ref(false);
const editorHtml = ref({
    html: ""
});
const editTextIndex = ref<number>(0);
const emit = defineEmits(["update:descArr"]);
onMounted(() => {
    emit("update:descArr", descArr);
});
const addPic = (result: any) => {
    for (let idx in result) {
        descArr.value.push({
            pic: result[idx].pic_url,
            type: "pic"
        });
    }
};
const editPic = (result: any, data: any) => {
    editTextIndex.value = data.index;
    descArr.value[editTextIndex.value] = {
        pic: result[0].pic_url,
        type: "pic"
    };
};
const previewHtml = computed(() => {
    let htmlArr = [];
    for (let idx in descArr.value) {
        if (descArr.value[idx].type == "pic") {
            htmlArr.push('<div class="desc-pic-item"><img src="' + imageFormat(descArr.value[idx].pic) + '"></div>');
        } else {
            htmlArr.push(descArr.value[idx].html);
        }
    }
    return htmlArr.join("<div data-division=1></div>");
});
const addText = () => {
    console.log(editTextIndex.value);
    visible.value = true;
    editorHtml.value.html = "";
};
const editText = (index: number) => {
    console.log(editTextIndex.value);
    editorHtml.value.html = descArr.value[index].html;
    editTextIndex.value = index;
    visible.value = true;
};
const del = (index: number) => {
    descArr.value.splice(index, 1);
};
const onOk = () => {
    if (editTextIndex.value > 0) {
        descArr.value[editTextIndex.value] = {
            html: editorHtml.value.html,
            type: "text"
        };
    } else {
        descArr.value.push({
            html: editorHtml.value.html,
            type: "text"
        });
    }
    console.log(descArr.value);
    visible.value = false;
};
</script>

<style lang="less" scoped>
/*商品内容编辑*/
.goods-info-edit-warp {
    width: 100%;
    padding: 15px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.goods-info-edit-act {
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.goods-info-edit-act :deep .add-item {
    transition: all 0.3s;
    margin-right: 10px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.06);
    border: 0;
    padding: 5px 20px;
    word-break: keep-all;
    color: #333;
}

.goods-info-edit-act :deep .add-item:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

.goods-info-edit-act :deep .add-item i {
    padding-right: 3px;
}

.goods-info-edit-act span {
    color: #999;
    padding-left: 10px;
}

.info-edit-con-list {
    display: flex;
    flex-wrap: wrap;
    min-height: 120px;
}

.info-edit-con-list .info-edit-list-item {
    width: 100px;
    height: 100px;
    border: 1px solid #eee;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    margin-top: 6px;
    cursor: pointer;
}

.info-edit-con-list .info-edit-list-item .edit-list-item-img a {
    width: 100px;
    height: 100px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.info-edit-con-list .info-edit-list-item .edit-list-item-img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.info-edit-con-list .info-edit-list-item .edit-list-item-text {
    text-align: center;
    height: 100px;
}

.info-edit-con-list .info-edit-list-item .edit-list-item-text i {
    font-size: 26px;
    padding-top: 26px;
    display: inline-block;
    padding-bottom: 10px;
    color: #666;
}

.info-edit-con-list .info-edit-list-item .btn-del {
    position: absolute;
    cursor: pointer;
    right: -10px;
    top: -10px;
    color: #fff;
    background: #dbdbdb;
    border-radius: 50%;
    z-index: 2;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    display: none;
}

.info-edit-con-list .info-edit-list-item:hover {
    border: 1px dashed #155bd4;
}

.info-edit-con-list .info-edit-list-item:hover .btn-del {
    display: block;
}

.info-edit-con-list .info-edit-list-item .btn-del:hover {
    background: #333;
}

.info-edit-con-list .info-edit-list-item :deep .btn-edit {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    text-align: center;
}

.info-edit-con-list .info-edit-list-item:hover :deep .btn-edit {
    display: block;
}

.goods-detail-preview-warp {
    width: 100%;
    max-width: 800px;
    overflow-y: auto;
    min-height: 500px;
    border: 1px solid #eee;
}

.goods-detail-preview-warp :deep .desc-pic-item img {
    max-width: 100%;
    display: block;
    width: 100%;
}
</style>
